.people-list-item.card.is-compact {
	border-bottom: 1px solid var( --color-neutral-0 );
	box-shadow: none;
	display: flex;
	overflow: hidden;
	position: relative;

	@include breakpoint-deprecated( '>480px' ) {
		padding: 24px;
	}

	&:last-of-type {
		border-bottom: none;
	}

	.bulk-editing & {
		padding-left: 40px;
	}

	&:focus {
		outline: 2px solid var( --color-primary-light );
		z-index: z-index( 'root', '.people-list-item.card.is-compact:focus' );
	}
}

.people-list-item__profile-container {
	display: block;
	flex-grow: 1;
	overflow: hidden;
}

.people-list-item__actions {
	align-self: center;
	display: block;
	flex-grow: 0;
	flex-shrink: 0;
}

.people-list-item .card__link-indicator {
	z-index: z-index( 'root', '.people-list-item .card__link-indicator' );
}

.people-list-item.is-invite .people-profile__username {
	@include breakpoint-deprecated( '>480px' ) {
		font-size: 18px;
	}
}

.people-list-item.is-invite-details {
	// Make extra space for invite status on small screens
	@include breakpoint-deprecated( '<480px' ) {
		padding-bottom: 34px;
	}
}

.people-list-item__invite-status {
	align-self: center;
	flex-shrink: 0;
	margin-left: 12px;

	&:not( .is-invite-details ) {
		// Get out of the way of the link to the invite details page
		margin-right: 30px;

		// Hide on small screens
		@include breakpoint-deprecated( '<480px' ) {
			display: none;
		}
	}

	&.is-invite-details {
		// Show below the name and role on small screens
		@include breakpoint-deprecated( '<480px' ) {
			position: absolute;
			bottom: 4px;
			margin-left: 80px;
		}
	}

	color: var( --color-success );

	&.is-pending {
		color: var( --color-text-subtle );
	}

	.gridicon {
		vertical-align: text-bottom;
		margin-right: 4px;
	}
}

.people-list-item__invite-resend {
	display: inline-block;
	min-width: 95px;
	height: 30px;
	margin-left: 12px;
	vertical-align: baseline;

	&.is-success {
		background-color: var( --color-neutral-0 );
		border: 0;
		color: var( --color-neutral-70 );
		cursor: default;
	}
}
